/**
 * RTK @reduxjs/toolkit
 *
 *    1. 安装
 *      npm install @reduxjs/toolkit
 *
 *      @reduxjs/toolkit 中 包含了
 *        1. redux 核心
 *        2. redux-thunk
 *        3. @reduxjs/devetools
 *        4. immerjs
 *        ...
 *
 *      注意：还是不能少了 react-redux
 *
 *    2. 创建切片
 *      采用 切片的方式来创建 拆分出去的 reducer，下面的这些 .ts 就是用于创建切片的。
 *        一个切片可以理解为一个子reducer.
 *      stores/
 *        cart.ts
 *        count.ts
 *        todos.ts
 *
 *    3. 基于切片配置仓库 or 创建仓库   configureStore
 *
 *    4. react-redux 的 Provider 正常使用
 *    5. react-redux 的 hooks 正常使用
 *
 */

import { useAppSelector, useAppDispatch } from "./store";

// 引入动作创建函数
import { inc, dec } from "./stores/count";

import { addTodo, delTodo } from "./stores/todos";

console.log("inc 调用的结构", inc("张三"));
console.log("dec 调用的结构", dec());

function App() {
  const num = useAppSelector((state) => state.count.num);
  const todos = useAppSelector((state) => state.todos.raws);
  const dispatch = useAppDispatch();
  return (
    <div>
      <h1>App - {num}</h1>
      <button onClick={() => dispatch(inc("张三"))}>inc</button>
      <button onClick={() => dispatch(dec())}>dec</button>

      <hr />
      <button onClick={() => dispatch(addTodo())}>AddTodo</button>
      <ul>
        {todos.map((item: any, index: number) => (
          <li key={item.id}>
            {item.title}
            <button onClick={() => dispatch(delTodo(index))}>Del</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;
